<template>
  <div class="alarm_list_popup" :class="{hidden:hidden}">
    <div class="alarm_header">
      <!--      <span :class="{active:currentDevice===SENSOR_TABLE}" @click="handleDeviceChange(SENSOR_TABLE)">传感报警</span>-->
      <!--      <span :class="{active:currentDevice===VIDEO_TABLE}" @click="handleDeviceChange(VIDEO_TABLE)">视频报警</span>-->
    </div>

    <div class="alarm_company_name">
      <img src="./img/hazardous_chemical/alarm.png" alt="">
      <span :title="currentItem.entName">{{ currentItem.entName ? currentItem.entName : '' }}</span>
    </div>

    <div class="alarm_company_info">
      <span class="company_alarm_type_">
      {{ currentItem.equipmentType === '1' ? '传感报警' : '视频报警' }}
      </span>
      <div class="info_item"><img src="./img/hazardous_chemical/location.png" alt="">
        <span
          :title="currentItem.monitoringObject">报警点位：{{
            currentItem.monitoringObject ? currentItem.monitoringObject : ''
          }}</span>
      </div>
      <div class="info_item"><img src="./img/hazardous_chemical/device_name.png" alt="">
        <span
          :title="currentItem.deviceName">设备名称：{{
            currentItem.deviceName ? currentItem.deviceName : ''
          }}</span>
      </div>
      <div class="info_item"><img src="./img/hazardous_chemical/file_type.png" alt="">
        <span :title="currentItem.videoType">报警类型：{{ currentItem.videoType ? currentItem.videoType : '' }}</span>
      </div>
      <div class="info_item"><img src="./img/hazardous_chemical/time.png" alt="">
        <span :title="currentItem.time">报警时间：{{ currentItem.time ? currentItem.time : '' }}</span>
      </div>
      <div class="info_item"><img src="./img/hazardous_chemical/value.png" alt="">
        <span :title="currentItem.alarmValue"
              style="color: #00A4E8">报警值：{{ currentItem.alarmValue ? currentItem.alarmValue : '' }}</span>
      </div>
    </div>

    <div class="alarm_company_count_layout">
      <span v-show="currentDevice===SENSOR_TABLE">
        第{{ alarmList.sensor.index }}条/共{{ alarmList.sensor.total }}条
      </span>
      <span v-show="currentDevice===VIDEO_TABLE">
        第{{ alarmList.video.index }}条/共{{ alarmList.video.total }}条
      </span>
    </div>
    <div class="alarm_company_change_index">
      <span @click="handlePreAlarm">上一条</span>
      <span @click="handleNextAlarm">下一条</span>
    </div>

    <div class="alarm_hidden_btn_" :class="{hidden:hidden}" @click="hidden=!hidden">
      <img src="./img/hazardous_chemical/right_arrow1.png" alt="">
    </div>
  </div>
</template>

<script>

const SENSOR_TABLE = 0
const VIDEO_TABLE = 1

export default {
  name: 'AlarmPopup',
  data () {
    return {
      hidden: false,
      SENSOR_TABLE,
      VIDEO_TABLE,
      session: '',
      currentDevice: SENSOR_TABLE,
      currentItem: { entName: '' },
      alarmList: {
        video: {
          data: [],
          index: 1,
          total: 0,
          page: 1,
          limit: 30
        },
        sensor: {
          data: [],
          index: 1,
          total: 0,
          page: 1,
          limit: 30
        }
      }
    }
  },
  methods: {
    init (session) {
      this.session = session
      this.getAllData()
      // 10分钟刷新一次
      setInterval(this.getAllData, 1000 * 60 * 10)
    },
    getAllData () {
      // 需要重置一下状态
      this.alarmList.sensor.page = 1
      this.alarmList.sensor.index = 1
      this.alarmList.video.page = 1
      this.alarmList.video.index = 1
      this.getSensor()
      // this.getVideo();
      this.refreshAlarmData()
      this.hidden = false
    },
    getSensor () {
      const data = {
        pageNum: this.alarmList.sensor.page,
        pageSize: this.alarmList.sensor.limit,
        filters: [
          {
            name: 'chulijieguo',
            operator: 'equal',
            value: '未处理'
          }
          // {
          //   name: 'baojingleixing',
          //   operator: 'equal',
          //   value: '传感器报警',
          // },
        ],
        PHPSESSID: this.session
      }
      this.$http.post(`/api/professional/devicealarm/alarm/warningList`, data).then((res) => {
        res = res.data
        if (res.success) {
          const { result } = res
          console.log(result)
          this.alarmList.sensor.total = result.total
          this.alarmList.sensor.data = result.list
          if (this.currentDevice === SENSOR_TABLE) {
            this.refreshAlarmData(this.currentDevice)
          }
        }
      })
    },
    getVideo () {
      const data = {
        pageNum: this.alarmList.video.page,
        pageSize: this.alarmList.video.limit,
        filters: [
          {
            name: 'chulijieguo',
            operator: 'equal',
            value: '未处理'
          },
          {
            name: 'baojingleixing',
            operator: 'equal',
            value: '视频报警'
          }
        ],
        PHPSESSID: this.session
      }
      this.$http.post(`/api/professional/devicealarm/alarm/warningList`, data).then((res) => {
        res = res.data
        if (res.success) {
          const { result } = res
          console.log(result)
          this.alarmList.video.total = result.total
          this.alarmList.video.data = result.list
          if (this.currentDevice === VIDEO_TABLE) {
            this.refreshAlarmData(this.currentDevice)
          }
        }
      })
    },

    refreshAlarmData (type) {
      const key = type === SENSOR_TABLE ? 'sensor' : 'video'
      // 防止越界
      if (this.alarmList[key].index > this.alarmList[key].total) {
        this.alarmList[key].index = this.alarmList[key].total
      }
      if (this.alarmList[key].index === 0) {
        this.alarmList[key].index = 1
      }

      // 计算是否需要翻页
      const index = this.alarmList[key].index - 1
      if (index >= this.alarmList[key].limit * this.alarmList[key].page) {
        // 下一页
        this.alarmList[key].page = this.alarmList[key].page + 1
        if (type === SENSOR_TABLE) {
          this.getSensor()
        } else {
          this.getVideo()
        }
      } else if (index < this.alarmList[key].limit * (this.alarmList[key].page - 1)) {
        // 上一页
        this.alarmList[key].page = this.alarmList[key].page - 1
        if (type === SENSOR_TABLE) {
          this.getSensor()
        } else {
          this.getVideo()
        }
      } else {
        const item = this.alarmList[key].data[index % this.alarmList[key].limit]
        this.currentItem = item || {}
      }
    },

    handleDeviceChange (type) {
      if (this.currentDevice !== type) {
        this.currentDevice = type
        this.refreshAlarmData(type)
      }
    },
    handlePreAlarm () {
      const key = this.currentDevice === SENSOR_TABLE ? 'sensor' : 'video'
      this.alarmList[key].index = this.alarmList[key].index - 1
      this.refreshAlarmData(this.currentDevice)
    },
    handleNextAlarm () {
      const key = this.currentDevice === SENSOR_TABLE ? 'sensor' : 'video'
      this.alarmList[key].index = this.alarmList[key].index + 1
      this.refreshAlarmData(this.currentDevice)
    }
  }
}
</script>

<style>
.alarm_list_popup {
  position: fixed;
  bottom: 24px;
  right: 0.6vw;
  width: 13.5vw;
  height: 32vh;
  /*background-color: rgba(0, 12, 30, 0.8);*/
  background-color: rgba(255, 255, 255, 0.5);
  border: 1px solid #3FC2FF;
  padding-top: 2.5vh;
  /*border-radius: 6px;*/
  transition: 0.2s;
}

.alarm_list_popup.hidden {
  transform: translateX(14.2vw);
}

.alarm_header {
  display: flex;
  position: absolute;
  top: 0.5vh;
  left: 0.2vw;
  font-size: 1.1vh;
}

.alarm_hidden_btn_ {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: absolute;
  top: 0.1vh;
  right: 0.1vh;
  height: 2.4vh;
  width: 2.4vh;
  transition: 0.2s;
}

.alarm_hidden_btn_ > img {
  width: 80%;
}

.alarm_hidden_btn_.hidden {
  background: #0071a1;
  left: -2.5vh;
  transform: rotateY(180deg);
  border-radius: 4px;
}

.alarm_header > span {
  cursor: pointer;
  display: inline-block;
  height: 2.4vh;
  line-height: 2.4vh;
  padding: 0 0.4vw;
  margin-right: 0.2vw;
  background-color: #266085;
  color: white;
}

.alarm_header > span:hover {
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
  background-color: #3782b1;
}

.alarm_header > span.active {
  background-color: #3ea4dc;
}

.alarm_company_name {
  display: flex;
  align-items: center;
  height: 3vh;
  font-size: 1.8vh;
  padding-left: 0.5vw;
  margin-bottom: 1.4vh;
  font-weight: bold;
  color: black;
}

.alarm_company_name > span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alarm_company_name > img {
  width: 2.2vh;
  height: 2.2vh;
  margin-right: 0.5vw;
}

.alarm_company_info {
  background-color: rgba(255, 255, 255, 0.8);
  font-size: 1.1vh;
  color: #444444;
  padding: 1vh 0.5vw 1.5vh;
  margin-bottom: 1.6vh;
}

.alarm_company_info .info_item {
  display: flex;
  align-items: center;
  height: 2.6vh;
}

.alarm_company_info .info_item > img {
  width: 1.6vh;
  height: 1.6vh;
  margin-right: 0.4vw;
}

.alarm_company_info .info_item > span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company_alarm_type_ {
  display: inline-block;
  height: 3.2vh;
  text-align: center;
  line-height: 3.2vh;
  font-size: 1.6vh;
  font-weight: bold;
  padding: 0 1vw;
  margin-bottom: 1vh;
  border-radius: 1.5vh;
  background-color: #f75c54;
  color: white;
}

.alarm_company_count_layout {
  float: left;
  margin-left: 0.5vw;
}

.alarm_company_change_index {
  float: right;
  margin-right: 0.5vw;
}

.alarm_company_count_layout,
.alarm_company_change_index {
  display: flex;
  align-items: center;
  height: 2.4vh;
  font-size: 1.1vh;

  color: black;
}

.alarm_company_change_index {
  display: flex;
  float: right;
  margin-right: 0.5vw;
}

.alarm_company_change_index > span {
  cursor: pointer;
  display: inline-block;
  height: 2.4vh;
  line-height: 2.4vh;
  padding: 0 0.4vw;
  background-color: #eeeeee;
  color: black;
  margin-left: 0.2vw;
}

.alarm_company_change_index > span:hover {
  background-color: white;
  color: #3782b1;
}
</style>
